<template>
	<div class="p_20 indexBanner">
		<el-dialog :visible.sync="isShow" :close-on-click-modal="false" @close="closeDialog">
			<!-- <el-divider></el-divider> -->
			<el-form :model="form" label-width="120px">
				<el-form-item label="资源名称">
					<el-input v-model="form.name" class="w_400"></el-input>
				</el-form-item>
				<el-form-item label="请选择资源类型">
					<el-select v-model="type" class="m_r_20">
						<el-option :value="1" label="管线类"></el-option>
						<el-option :value="2" label="文献类"></el-option>
					</el-select>
					<el-button type="primary" size="small" @click="sub">确认载入</el-button>
				</el-form-item>

				<el-divider></el-divider>
				<div v-if="form.type == 1">
					<el-button type="primary" size="small" @click="addgx">新增</el-button>

					<el-table width='100%' :data="gx">

						<el-table-column label='适应症' prop='indication'></el-table-column>
						<el-table-column label='临床一期' prop='phase1'></el-table-column>
						<el-table-column label='临床二期' prop='phase2'></el-table-column>
						<el-table-column label='临床三期' prop='phase3'></el-table-column>
						<el-table-column label='临床试验地区' prop='area'></el-table-column>
						<el-table-column label='操作' prop='area'>
							<template slot-scope="scope">
								<el-button size="small" @click="editgx(scope.row,scope.$index)">编辑</el-button>
								<el-button size="small" @click="deletegx(scope)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

				<div v-if="form.type == 2">
					<el-button type="primary" size="small" @click="addwx">新增</el-button>

					<el-table width='100%' :data="wx">

						<el-table-column label='发表日期' prop='date'></el-table-column>
						<el-table-column label='期刊名称' prop='name'></el-table-column>
						<el-table-column label='文献标题' prop='title'></el-table-column>
						<el-table-column label='操作' prop='title'>
							<template slot-scope="scope">
								<el-button size="small" @click="editwx(scope.row,scope.$index)">编辑</el-button>
								<el-button size="small" @click="deletewx(scope)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 管线类 -->
		<el-dialog :visible.sync="isShow1" @close="close1" append-to-body>
			<el-divider content-position="left">管线编辑</el-divider>
			<el-form label-width="80px" v-model="gxForm">
				<el-form-item label="适应症">
					<el-input v-model="gxForm.indication"></el-input>
				</el-form-item>
				<el-form-item label="临床前">
					<el-select v-model="gxForm.preclinical[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.preclinical[1]" class="m_r_20">
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.preclinical[2]" class="m_r_20">
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床一期">
					<el-select v-model="gxForm.phase1[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase1[1]" class="m_r_20">
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase1[2]" class="m_r_20">
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床二期">
					<el-select v-model="gxForm.phase2[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase2[1]" class="m_r_20">
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase2[2]" class="m_r_20">
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="临床三期">
					<el-select v-model="gxForm.phase3[0]" class="m_r_20">
						<el-option value="蓝" label="蓝"></el-option>
						<el-option value="红" label="红"></el-option>
						<el-option value="黑" label="黑"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase3[1]" class="m_r_20">
						<el-option value="无" label="无"></el-option>
						<el-option value="10%" label="10%"></el-option>
						<el-option value="20%" label="20%"></el-option>
						<el-option value="30%" label="30%"></el-option>
						<el-option value="40%" label="40%"></el-option>
						<el-option value="50%" label="50%"></el-option>
						<el-option value="60%" label="60%"></el-option>
						<el-option value="70%" label="70%"></el-option>
						<el-option value="80%" label="80%"></el-option>
						<el-option value="90%" label="90%"></el-option>
						<el-option value="100%" label="100%"></el-option>
					</el-select>
					<el-select v-model="gxForm.phase3[2]" class="m_r_20">
						<el-option value="尖" label="尖"></el-option>
						<el-option value="平" label="平"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="试验地区">
					<el-input class="w_400" v-model="gxForm.area"></el-input>
				</el-form-item>

			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="close1">取 消</el-button>
				<el-button type="primary" @click="sub1">确 定</el-button>
			</span>
		</el-dialog>


		<!-- 文献类 -->
		<el-dialog :visible.sync="isShow2" @close="close2" append-to-body>
			<el-divider content-position="left">文献编辑</el-divider>
			<el-form label-width="80px" v-model="wxForm">
				<el-form-item label="发布时间">
					<!-- <el-input v-model="wxForm.date"></el-input> -->
					<el-date-picker v-model="wxForm.date" type="month" value-format="yyyy-MM" placeholder="选择日期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="期刊名称">
					<el-input class="w_400" v-model="wxForm.name"></el-input>
				</el-form-item>
				<el-form-item label="文献标题">
					<el-input class="w_400" v-model="wxForm.title"></el-input>
				</el-form-item>
				<el-form-item label="文献链接">
					<el-input class="w_800" v-model="wxForm.doc"></el-input>
				</el-form-item>


			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="close2">取 消</el-button>
				<el-button type="primary" @click="sub2">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				isShow1: false,
				isShow2: false,

				gx: [],
				gx_id:'',
				gxForm: {
					indication: '',
					preclinical: [],
					phase1: [],
					phase2: [],
					phase3: [],
					area: ''
				},
				wx: [],
				wx_id:'',
				wxForm: {
					date: '',
					name: '',
					title: '',
					doc: ''
				},
				type: 1,
				fileList: [],
				form: {
					id: '',
					name: '',
					type: 1,
					data: []
				},
				upImg: {
					label: '图片',
					imageUrl: '',
					name: 'file',
					width: '1080',
					height: '768',
					file: ''
				},

				//图片上传
				imageUrl: '',
				// dialogVisible: false,
				// disabled: false
			}
		},
		methods: {
			
			getDetail(id,type){
				let params = {
					id:id,
					type:type,
					language: this.$store.getters.getLanguage,
					
				}
				// console.log(this.gx);
				// console.log(this.gxForm);
				// console.log(this.wx);
				// console.log(this.wxForm);
				this.axiosPost('Development/resourcesShow' , params , res => {
					if(res.data.code == 0) {
						let form1 = res.data.data;
						form1.forEach((item) => {
							this.form = {
								id: item.resource_id ? item.resource_id : item.resources_id,
								name: item.resources.name,
								type: item.resources.type,
								data: []
							}
							if(item.resources.type == 1) {
								// this.gxForm = {
								// 	indication:item.indication,
								// 	preclinical:item.preclinical ? item.preclinical.split(',') : [],
								// 	phase1:item.phase1 ? item.phase1.split(',') : [],
								// 	phase2:item.phase2 ? item.phase2.split(',') : [],
								// 	phase3:item.phase3 ? item.phase3.split(',') : [],
								// 	area:item.area
								// }
								this.gx.push({
									indication:item.indication,
									preclinical:item.preclinical,
									phase1:item.phase1,
									phase2:item.phase2,
									phase3:item.phase3,
									area:item.area
								})
								// console.log(this.gxForm);
							} else {
								// this.wxForm = {
								// 	date:item.date,
								// 	name:item.name,
								// 	title:item.title,
								// 	doc:item.doc
								// }
								this.wx.push({
									date:item.date,
									name:item.name,
									title:item.title,
									doc:item.doc
								});
								// this.fileList.push({name:item.doc.substr(item.doc.lastIndexOf('/')+1),url:item.doc})
							}
						})
						
						this.type = this.form.type*1;
						console.log(this.form);
					}
				})
			},

			//载入
			sub() {
				this.form.type = this.type;
				if (this.form.type == 0) {
					this.wx = []
				} else {
					this.gx = []
				}
			},

			addgx() {
				this.isShow1 = true;
			},
			editgx(scope,index) {
				this.gxForm = scope;
				this.gx_id = index;
				// console.log(this.gx_id + ' %%%%%%%%%%%%%%%%%%%')
				this.gxForm.preclinical = scope.preclinical ? scope.preclinical.split(',') : []
				this.gxForm.phase1 =  scope.phase1 ? scope.phase1.split(',') : []
				this.gxForm.phase2 =  scope.phase2 ? scope.phase2.split(',') : []
				this.gxForm.phase3 =  scope.phase3 ? scope.phase3.split(',') : []
				this.isShow1 = true;

			},
			deletegx(scope) {
				this.gx.splice(scope.$index, 1);
			},
			sub1() {
				let gxForm1 = {
					indication: this.gxForm.indication,
					preclinical: this.gxForm.preclinical.toString(),
					phase1: this.gxForm.phase1.toString(),
					phase2: this.gxForm.phase2.toString(),
					phase3: this.gxForm.phase3.toString(),
					area: this.gxForm.area
				}
				console.log(gxForm1);
				// console.log(this.gx_id + ' %%%%%%%%%%%%%%%%%%%')
				if(this.gx_id >= 0 && this.gx_id !== '') {
					console.log(this.gx_id);
					this.gx.splice(this.gx_id , 1 , gxForm1);
				}else {
					this.gx.push(gxForm1);
				}
				this.close1()
			},
			close1() {
				this.gxForm = {
					indication: '',
					preclinical: [],
					phase1: [],
					phase2: [],
					phase3: [],
					area: ''
				}
				this.gx_id = '';
				this.isShow1 = false;
			},



			//文献类
			//内容
			addwx() {
				this.isShow2 = true;
			},
			editwx(scope,index) {
				this.wxForm = scope;
				this.wx_id = index;
				this.isShow2 = true;

			},
			deletewx(scope) {
				this.wx.splice(scope.$index, 1);
			},
			sub2() {
				console.log(this.wxForm);
				if(this.wx_id) {
					this.wx.splice(this.wx_id , 1 , this.wxForm);
				} else {
					this.wx.push(this.wxForm);
				}
				this.close2()
			},
			close2() {
				this.wxForm = {
					date: '',
					name: '',
					title: '',
					doc: ''
				};
				this.wx_id = '';
				this.fileList = [];
				this.isShow2 = false;
			},


			//提交
			submit() {
				if (this.form.type == 1) {
					this.form.data = this.gx;
				} else {
					this.form.data = this.wx;
				}
				let params = this.form;
				params.language = this.$store.getters.getLanguage
				console.log(params);

				this.onLoad(true)
				if (this.form.id) {
					this.edit(params);
				} else {
					this.add(params);
				}
			},


			//新增
			add(params) {
				this.axiosPost('Development/resourcesAdd', params, res => {
					if (res.data.code === 0) {
						this.onLoad(false)
						// this.msgSuccess(res.data.msg);
						this.$parent.getTableData();
						this.isShow = false;
					}
				})
			},

			//编辑
			edit(params) {
				this.axiosPost('Development/resourcesEdit', params, res => {
					if (res.data.code === 0) {
						// this.msgSuccess(res.data.message);
						this.onLoad(false)
						this.$parent.getTableData();
						this.isShow = false;
					} else {
						this.msgError(res.data.message)
					}
				})
			},


			//图片上传
			handleAvatarSuccess(res, file) {
				console.log(res);
				console.log(file);
				//图片id
				this.wxForm.doc = res.data;
				// this.fileList.push()
				//图片url
				// this.imageUrl = this.imgURL + res.data.image_url;
				// this.form.url = res.data.image_url;
				// this.dialogVisible = true;
			},

			//关闭窗口 清空数据
			closeDialog() {
				this.form = {
					id: '',
					name: '',
					type: 1,
					data: []
				}
				this.gx = [];
				this.wx = [];
				this.gx_id = '';
				this.wx_id = '';
				this.gxForm = {
					indication:'',
					preclinical:[],
					phase1:[],
					phase2:[],
					phase3:[],
					area:''
				}
				this.wxForm = {
					date:'',
					name:'',
					title:'',
					doc:''
				}
				this.fileList = [];
				// this.upImg={
				// 	label: '图片',
				// 	imageUrl: '',
				// 	name: 'file',
				// 	width: '1080',
				// 	height: '768',
				// 	file: ''
				// },
				// this.imageUrl = ''
				console.log(this.gx);
				console.log(this.gxForm);
				console.log(this.wx);
				console.log(this.wxForm);

				this.isShow = false;
			}
		}
	}
</script>

<style scoped>

</style>
